<script setup lang="ts">
/*
 * @description: 分页组件
 * @fileName: List.vue
 * @params {Function} api : 数据请求的接口API
 * @params {Function} afterLoadData : 数据请求完毕前置处理方法
 * @params {object: any} options : 数据请求的额外参数
 * @params {'default' | 'scrollView'} listType :  scrollView为scroll-view包裹的分页
 * @ref setListParams {Function} : 使用==>ref.value.setListParams(obj, isClear) obj:请求额外的参数 isClear是否清空请求参数
 * @author: lxx
 * @date: 2023-07-28 11:36:23
 * @update: 2023-10-13 10:34:03
 * @version: V1.0.1
 */
import { LoadData } from '../libs/hooks/useListLoadClass'
import { toRefs, ref } from 'vue';
import lxListState from '../lx-list-state/lx-list-state.vue'
interface listPropsInt {
    api: Function
    afterLoadData?: Function
    options?: any
    listType?: 'default' | 'scrollView'
}

// 接收传值
// 3.2.x defineProps泛型类型参数仅限于类型文字或对本地接口的引用
const props = withDefaults(defineProps<listPropsInt>(), {
    api: () => ({}),
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    options: {},
    listType: 'default'
})
let { options, api, afterLoadData } = toRefs(props)
// console.log('props', props.options, options.value)

// 分页相关
let { list, isLoading, isEmpty, isNoData, setParams, LoadMore } = LoadData({
    api: api.value,
    afterLoadData: afterLoadData?.value,
    options: options.value
})
// 搜索相关
// const inputTxt = ref('')
// const inputChange = debounce(() => {
//     console.log('input change')
//     setParams({ search: inputTxt.value })
// })

// 用于父组件设置额外的参数（选项卡切换的时候使用）--> isClear true 清空列表需测试
const setListParams = (obj: any, isClear = true) => {
    const param = ref<{
        search?: string
        [key: string]: any
    }>({})
    // if (props.isNeedSearch) {
    //     param.value.search = inputTxt.value
    // }
    param.value = { ...obj }
    setParams({ ...param.value }, isClear)
}
defineExpose({
    list,
    setListParams,
    LoadMore
})
// 页面滚动相关
const scrollTop = ref(0)
const scroll = (e: any) => {
    scrollTop.value = e.detail.scrollTop
}

const emit = defineEmits(['scrollTolower'])
const scrolltolower = () => {
    console.log('触底啦！')
    LoadMore()
    emit('scrollTolower')
}
</script>
<template>
    <template v-if="listType == 'default'">
        <view class="lxx_list_box">
            <view class="lxx_list_box_content">
                <template v-for="(item, index) in list" :key="index">
                    <slot v-bind:item="item" v-bind:index="index"></slot>
                </template>
            </view>
            <lxListState :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lxListState>
        </view>
    </template>

    <template v-else>
        <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="scrolltolower">
            <view class="lxx_list_box">
                <view v-for="(item, index) in list" :key="index">
                    <slot v-bind:item="item" v-bind:index="index"></slot>
                </view>
            </view>
            <lxListState :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lxListState>
        </scroll-view>
    </template>
</template>
<style lang="scss" scoped></style>